<template>
  <view class="bg">
    <view class="card">
      可提现金额:{{balance.usableBalance}}元
    </view>
    <view class="card">
      <text>银行卡</text>
      <u-input type="select" :value="bankValue" @click="showBankList = true"></u-input>
    </view>
    <view class="card card__main">
      <text class="card__title">提现金额</text>
      <view class="card__amount">
        <view class="u-flex">
          <text class="amount__symbol">¥</text>
          <u-field v-model="query.withdrawAmount"
                   label-width="0"
                   @input="changeAmount"
                   :error-message	="bankValueErrMsg"
                   placeholder="请输入提现金额"
          >
          </u-field>
<!--          <u-input v-model="query.withdrawAmount" type="number" ></u-input>-->
          <u-action-sheet :list="bankList" v-model="showBankList" @click="bankSheetCallback"></u-action-sheet>
        </view>
        <view class="amount__all" @click="allWithdraw">全部提现</view>
      </view>
      <text class="amount__tips">认真查看银行卡号，确保选择正确</text>
    </view>
    <view class="card">
      <text>备注</text>
      <u-input v-model="query.remark" placeholder="请输入备注"></u-input>
    </view>
    <u-button :custom-style="buttonStyle" :disabled="submitDisabled" @click="submit">申请</u-button>
    <u-toast ref="uToast"/>
  </view>
</template>
<script>
import {cardList} from "../../api/bankCard";
import {getBalance,apply} from "../../api/withdraw";
export default {
  data() {
    return {
      query:{
        withdrawAmount:"",
        bankId:"",
        remark:""
      },
      //银行卡默认值
      bankValue:"",
      showBankList:false,
      submitDisabled:false,
      buttonStyle:{
        width:"90%",
        height:"80rpx",
        color:"#ffffff",
        background:"#D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%)",
        borderRadius:"10rpx"

      },
      //显示错误信息
      bankValueErrMsg:"",
      balance:{},
      bankList: [

      ],
    }
  },
  onShow(){
    this.getBalanceInfo();
    this.getBankList();
  },
  methods:{
    //获取余额操作
    getBalanceInfo(){
      getBalance().then(res =>{
        this.balance = res.data;
      })
    },
    //全部提现操作
    allWithdraw(){
      this.query.withdrawAmount = this.balance.usableBalance;
    },
    //获取银行卡列表
    getBankList(){
      cardList().then(res =>{
        this.bankList = res.data;
        this.bankList.forEach(item =>{
          item.text = item.bankNumber
        })
        console.log(this.bankList);
        this.bankValue = this.bankList[0].bankNumber;
        this.query.bankId = this.bankList[0].id;
      })
    },
    //选择银行卡操作
    bankSheetCallback(index){
      this.bankValue = this.bankList[index].bankNumber;
      this.query.bankId = this.bankList[index].id;
    },
    //检测提现金额是否大于可提现金额
    changeAmount(value){
      if (Number(value) > Number(this.balance.usableBalance)){
        this.bankValueErrMsg = "现金额不能大于可提现金额"
        this.submitDisabled = true;
        this.buttonStyle.background = "#AEB3C0"
      }else {
        this.bankValueErrMsg = "";
        this.submitDisabled = false;
        this.buttonStyle.background = "#D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%)";


      }
    },
    submit(){
      apply(this.query).then(res =>{
        this.getBalanceInfo();
        this.$refs.uToast.show({
          title: '申请成功',
          duration:1000,
          type: 'success',
          callback(){
            uni.navigateBack({
              delta: 1
            });
          }

        })

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bg{
  width: 100vw;
  height: 100vh;
  background: #F8F9F9;
  overflow: hidden;
}
.card{
  width: 90%;
  margin: 40rpx auto;
  padding: 40rpx;
  background: #ffffff;
  box-shadow: 2px 4px 12px 0px rgba(222, 222, 222, 0.5);
  border-radius: 14rpx;
}
.card__amount{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40rpx 0;
  padding: 20rpx 0;
  border-bottom:1px solid #E9E9E9 ;
  .amount__symbol{
    font-size: 40rpx;
    margin-right: 20rpx;

  }
}
.amount__all{
  width: 150rpx;
  color: #D43F3D;
}
.amount__tips{
  color: #AEB3C0;
  font-size: 24rpx;
}
.submit__btn{
  border-radius: 10rpx;
}
</style>
